<template>
	<view class="add">
		<view class="navbar_">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view
					:style="{height: navbarStatusHeight + 'px', background: '#007cff'}"
				></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="navbar-content">
					<uni-icons
						type="back"
						@click="back"
						color="#fff"
						size="24"
						class="back_btn"
					></uni-icons>
					<view class="navBar">
						<view class="text_title">{{ store.state.wayType.name }}</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->
				<view
					class="navbar-content"
					:style="{width: '100%', height: navBarHeight + 'px'}"
				>
					<uni-icons
						type="back"
						@click="back"
						color="#fff"
						size="26"
						class="back_btn"
					></uni-icons>
					<view class="navBar">
						<view class="text_title">{{ store.state.wayType.name }}</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<!-- <view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view> -->
		</view>
		<view class="contact_xy">
			<view class="scroll_box">
				<view class="scroll_box_cont">
					<uni-list :border="false" class="uni_list">
						<!-- 商品 -->
						<uni-list-item
							:showArrow="!goodsCode"
							:clickable="true"
							:border="false"
							class="pro_link"
						>
							<template v-slot:header>
								<span class="star">*</span>
								<span class="custom-title">商品</span>
							</template>
							<template v-slot:footer>
								<view class="add_pro" @click="addGoods" v-if="!goodsCode">
									<uni-icons type="plus" color="#007cff" size="16"></uni-icons>
									<span class="custom-title">添加</span>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
					<uni-forms
						ref="baseForm"
						label-position="top"
						:model="orderData"
						label-width="120"
					>
						<!-- 已添加的商品列表 -->
						<view class="por_card" v-if="store.getters.getTotalList.length > 0">
							<view
								class="goods_item"
								v-for="(item, index) in store.getters.getTotalList"
								:key="index"
							>
								<view class="goods_item_left">
									<view class="item_img">
										<image
											:src="item.image"
											v-if="item.image"
											@click="lookImg(item.image)"
											class="_img"
											mode="aspectFill"
										></image>
										<uni-icons
											color="#aac"
											size="48"
											v-else
											type="image"
										></uni-icons>
									</view>
									<view class="item_title">
										<view class="item_title_header">
											<view class="item_title_text_brand">
												{{ item.name }}
											</view>
											<view class="delete_item">
												<uni-icons
													type="minus-filled"
													size="24"
													class="del_btn"
													@click="deleteGoodsDetail(item)"
													color="#FF5733"
												></uni-icons>
											</view>
										</view>
										<view class="item_title_text">
											型号：
											<span class="item_title_color">{{ item.model }}</span>
										</view>
										<view class="item_title_text">
											规格：
											<span class="item_title_color">{{ item.specName }}</span>
										</view>
										<view class="item_title_code">
											<template v-if="item.code">
												<span>
													一物一码：
													<span class="item_title_color">{{ item.code }}</span>
												</span>
											</template>
										</view>
										<view class="item_title_text">
											<span>质保到期时间：</span>
											<span class="item_title_color">{{ item.endTime }}</span>
										</view>
										<view class="number">
											<uni-number-box
												@change="changeValue(item)"
												:disabled="item.typeGoods == 1"
												style="transform: scale(0.9)"
												v-model="item.qty"
												:min="1"
											/>
										</view>
									</view>
								</view>
								<!-- <uni-forms-item label="购买商场">
									<uni-easyinput
										@change="changeInput"
										v-model="item.buyMarket"
										placeholderStyle="font-size:28rpx;"
										maxlength="15"
										placeholder="请输入"
									/>
								</uni-forms-item> -->
								<uni-forms-item label="购买时间">
									<uni-datetime-picker
										:disabled="!!item.buyTime"
										v-model="item.buyTime"
										:end="endTime"
										:hide-second="true"
										type="date"
									/>
								</uni-forms-item>
							</view>
						</view>
						<!-- 已添加的商品列表 end -->

						<view class="uni_form">
							<view class="address_item_">
								<!-- 选择上门时间 -->
								<uni-forms-item class="address_item" label="期望时间">
									<view class="sel_address" @click="chackTime">
										<view class="text_9" v-if="!orderData.expectedStartTime">
											选择上门时间
										</view>
										<view class="" v-else>
											{{ store.state.appointmentTime?.dateVal.text }}
											&nbsp;{{ store.state.appointmentTime?.time }}
										</view>
										<uni-icons
											style="padding-left: 10px"
											type="right"
											size="14"
											color="#999"
										></uni-icons>
									</view>
								</uni-forms-item>
								<uni-forms-item
									v-if="store.state.userMobileHasLogin || token"
									required
									label="服务地址"
									:rules="[{required: true, errorMessage: '服务地址'}]"
									:name="['orderUser', 'sendForRepairUserId']"
									class="address_item"
								>
									<view class="sel_address" @click="popupshow2">
										<view class="text_9" v-if="!store.state.userOrder.sendForRepairUserId">
											选择服务地址
										</view>
										<view v-else style="text-align: right">
											<view class="tipadd">
												<span class="user_name">
													{{ store.state.userOrder.sendForRepairUsername }}
												</span>
												&nbsp;&nbsp;{{ store.state.userOrder.sendForRepairPhone }}
											</view>
											<view
												class="tipadd"
												style="color: #777; font-size: 26rpx"
											>
												{{
													[
														store.state.userOrder.province,
														store.state.userOrder.city,
														store.state.userOrder.area,
														store.state.userOrder.address,
													]
														.filter((o) => o)
														.join('')
												}}
											</view>
										</view>
										<uni-icons
											type="right"
											size="14"
											color="#999"
											style="padding-left: 10px"
										></uni-icons>
									</view>
								</uni-forms-item>
							</view>
							<view
								v-if="!(store.state.userMobileHasLogin || token)"
								class="user_info"
							>
								<uni-forms-item
									:rules="[{required: true, errorMessage: '联系姓名'}]"
									:name="['orderUser', 'name']"
									required
									class="address_item"
									label="联系姓名"
								>
									<uni-easyinput
										@change="changeInput"
										v-model="orderData.orderUser.name"
										placeholderStyle="font-size:28rpx;"
										placeholder="请输入联系姓名"
									/>
								</uni-forms-item>
								<uni-forms-item
									required
									label="联系手机"
									:rules="[{required: true, errorMessage: '请输入联系手机号'}]"
									:name="['orderUser', 'phone']"
									class="address_item"
								>
									<uni-easyinput
										@change="changeInput"
										v-model="orderData.orderUser.phone"
										type="number"
										placeholderStyle="font-size:28rpx;"
										placeholder="请输入联系手机号"
										maxlength="11"
									/>
								</uni-forms-item>
								<uni-forms-item
									required
									label="所在地区"
									:rules="[{required: true, errorMessage: ' '}]"
									:name="['orderUser', 'province']"
									class="address_item"
								>
									<AreaAddress
										:color="color_text"
										style="width: 100%"
										ref="addressRef"
										@change="changeInput"
										:address_obj="addressValue"
									></AreaAddress>
								</uni-forms-item>
								<uni-forms-item
									:rules="[{required: true, errorMessage: ' '}]"
									:name="['orderUser', 'address']"
									required
									label="详细地址"
									class="address_item"
								>
									<uni-easyinput
										@change="changeInput"
										v-model="orderData.orderUser.address"
										placeholderStyle="font-size:28rpx;"
										placeholder="请输入联系详细地址"
									/>
								</uni-forms-item>
							</view>
							<view
								class="link"
								v-if="orderData.workFieldVal.length > 0"
								style="margin-bottom: 20rpx"
							></view>
							<view
								v-if="orderData.workFieldVal.length > 0"
								v-for="(item, index) in orderData.workFieldVal"
								:key="index"
							>
								<uni-forms-item
									:label="item.name"
									:required="item.required"
									:name="[
										'workFieldVal',
										index,
										item.type === 5 || item.type === 6 || item.type === 7
											? 'imgarr'
											: 'value',
									]"
									:rules="[{required: item.required, errorMessage: item.name}]"
								>
									<view
										class="team_type"
										:class="{
											team_type_:
												(item.type == 4 && item.contents.length <= 3) ||
												item.type == 8 ||
												(item.type === 3 && item.contents.length <= 3),
										}"
									>
										<!-- 文本1 -->
										<uni-easyinput
											v-model="item.value"
											v-if="item.type === 1"
											placeholderStyle="font-size:28rpx;"
											:placeholder="item.tip"
										/>
										<!-- 多行文本2 -->
										<uni-easyinput
											trim="right"
											autoHeight
											v-model="item.value"
											type="textarea"
											v-if="item.type === 2"
											placeholderStyle="font-size:28rpx;"
											:placeholder="item.tip || '请输入'"
										/>
										<!-- 单选 3-->
										<uni-data-select
											style="width: 100%"
											v-model="item.value"
											v-if="item.type === 3 && item.contents.length > 3"
											:localdata="item.contents"
										></uni-data-select>
										<uni-data-checkbox
											v-model="item.value"
											v-else-if="item.type === 3"
											:localdata="item.contents"
										></uni-data-checkbox>
										<!-- 多选4 -->
										<uni-data-checkbox
											v-if="item.type === 4 && item.contents.length <= 3"
											multiple
											v-model="item.value"
											:localdata="item.contents"
										></uni-data-checkbox>
										<zxz-uni-data-select
											style="width: 100%"
											:collapseTags="true"
											:collapseTagsNum="1"
											v-else-if="item.type === 4"
											multiple
											:localdata="item.contents"
											v-model="item.value"
										></zxz-uni-data-select>
										<!-- 图片 5 -->
										<view class="pic_img" v-if="item.type === 5">
											<uni-file-picker
												@select="(files) => onsuccessImg2(item, files)"
												:auto-upload="false"
												@delete="(file) => ondeleteImg2(item, file)"
												:imageStyles="imageStyles"
												file-mediatype="image"
												v-model="item.imgarr"
												:limit="item.uploadQty"
											/>
										</view>
										<!-- 附件6 -->
										<view class="pic_video" v-if="item.type === 6">
											<view
												class="list_video"
												v-for="(src, imgIndex) in item.imgarr"
												:key="imgIndex"
											>
												<view class="box_video_pdf">
													<uni-icons
														type="closeempty"
														@click="delete_video(item, imgIndex)"
														class="clear_icon"
														size="14"
														color="#fff"
													></uni-icons>
													<view class="pdf_sty" @click="lookPDF(src.url)">
														PDF
													</view>
												</view>
											</view>
											<view
												class="btn_uploader"
												v-if="item.uploadQty > item.imgarr.length"
											>
												<uni-icons
													type="plusempty"
													class="icon_plus"
													size="18"
													color="#999"
												></uni-icons>
												<uni-file-picker
													file-extname="pdf"
													fileMediatype="all"
													v-model="item.imgarr"
													:auto-upload="false"
													@select="(file) => chooseFile(item, file)"
												/>
											</view>
										</view>
										<!-- 视频7 -->
										<view class="pic_video" v-if="item.type === 7">
											<view
												class="list_video"
												v-for="(src, imgIndex) in item.imgarr"
												:key="imgIndex"
											>
												<view class="box_video">
													<uni-icons
														type="closeempty"
														@click="delete_video(item, imgIndex)"
														class="clear_icon"
														size="14"
														color="#fff"
													></uni-icons>
													<video
														:src="src.url"
														:controls="false"
														@click="videoUrlShow(src.url)"
														:enable-progress-gesture="false"
														:show-center-play-btn="false"
														class="item_video"
													></video>
												</view>
											</view>
											<view
												class="btn_uploader"
												v-if="item.uploadQty > item.imgarr.length"
											>
												<uni-icons
													type="plusempty"
													class="icon_plus"
													size="18"
													color="#999"
												></uni-icons>
												<uni-file-picker
													fileMediatype="video"
													mode="grid"
													file-extname="mp4,mov"
													:auto-upload="false"
													@select="(file) => chooseVideoImage(item, file)"
												/>
											</view>
										</view>
										<!-- 评分8 -->
										<uni-rate
											v-if="item.type === 8"
											v-model="item.value"
											margin="10"
										/>
										<uni-datetime-picker
											v-if="item.type === 9"
											type="date"
											:clear-icon="false"
											v-model="item.value"
										/>
										<uni-datetime-picker
											:hide-second="true"
											v-if="item.type === 10"
											type="datetime"
											v-model="item.value"
										/>
									</view>
								</uni-forms-item>
							</view>
						</view>
						<view class="link"></view>
						<view class="mg_top">
							<uni-forms-item label="购买平台订单号" v-if="isShowBuyPlatformOrderNo">
								<template #label>
									<view class="tiao_jian">
										<span class="custom-title">
											<span style="color: #f56c6c; font-weight: bold">*</span>
											购买平台订单号
										</span>
									</view>
								</template>
								<uni-easyinput
									v-model="orderData.buyPlatformOrderNo"
									placeholderStyle="font-size:28rpx;"
									maxlength="15"
									placeholder="请输入"
								/>
							</uni-forms-item>
							<uni-forms-item label="工单描述">
								<view class="message">
									<view class="big_input">
										<template
											v-for="(val, index1) in faultTypeList()"
											:key="index1"
										>
											<view @click="setFaultType(val)" class="input_item">
												{{ val.name }}
												<uni-icons
													class="icon_close"
													type="closeempty"
													color="#d4d4d4"
												></uni-icons>
											</view>
										</template>
									</view>
									<textarea
										maxlength="200"
										placeholderStyle="font-size:24rpx;color:#999"
										placeholder="请输入机器故障现象或补充其他说明"
										:auto-height="true"
										:autosize="false"
										v-model="message"
									/>
									<p
										style="
											text-align: right;
											font-size: 24rpx;
											color: #999;
											padding: 4px;
										"
									>
										{{ message.length }}/200
									</p>
								</view>
							</uni-forms-item>
							<uni-forms-item>
								<template #label>
									<view class="tiao_jian">
										<span class="custom-title">
											<span style="color: #f56c6c; font-weight: bold">*</span>
											图片
										</span>
										<view class="text">
											(上传机器整体图片,铭牌图片,购买凭证,允许上传9张)
										</view>
									</view>
								</template>
								<view class="pic_img">
									<uni-file-picker
										@select="onsuccessImg"
										file-extname="jpg,jpeg,png"
										:auto-upload="false"
										@delete="ondeleteImg"
										:imageStyles="imageStyles"
										:sizeType="['original', 'compressed']"
										:sourceType="['album', 'camera']"
										file-mediatype="image"
										v-model="fileList"
										limit="9"
									/>
								</view>
							</uni-forms-item>
						</view>
					</uni-forms>
				</view>
			</view>
		</view>
		<view class="address_btn">
			<view class="btn_addres">
				<button type="primary" class="btn" @click="onsubService">
					提交工单
				</button>
			</view>
		</view>
	</view>
	<!--选择服务地址 弹窗  str -->
	<uni-popup ref="showAddpopup" :safe-area="false" type="bottom">
		<view class="popup_main">
			<view class="lable_top">
				选择服务地址
				<uni-icons
					class="icon"
					color="#aaa"
					@click="showAddpopup.close()"
					size="22"
					type="closeempty"
				></uni-icons>
			</view>
			<view class="search_card">
				<uni-search-bar
					:focus="false"
					class="search_card_bar"
					@confirm="getNetwrokSelectFn()"
					placeholder="客户姓名/手机号查询"
					radius="100"
					bg-color="rgba(242, 243, 245, 1)"
					cancelButton="none"
					v-model="searchNamePhone"
				></uni-search-bar>
				<view class="search_btn" @click="getNetwrokSelectFn()">搜索</view>
			</view>
			<view class="add_address">
				<span @click="onaddAddress()">没有地址？去添加地址！</span>
			</view>
			<radio-group class="sele_ul" v-if="store.state.addressList.length > 0">
				<view
					class="sele_li"
					v-for="(item, index) in store.state.addressList"
					:key="index"
				>
					<view class="sele_li_item" @click="itemUser(item)">
						<radio
							:value="item.id"
							@click="itemUser(item)"
							color="#007cff"
							style="transform: scale(0.8)"
							:checked="chackUseritem?.id == item.id"
						/>
						<view class="add_ed">
							<view class="user_xx">
								<span class="user_name">{{ item.username }}</span>
								&nbsp; &nbsp;{{ item.phone }}
								<view class="tip" v-if="item.mainContact">默认</view>
							</view>
							<view>
								{{
									[item.province, item.city, item.area]
										.filter((o) => o)
										.join('')
								}}
							</view>
							<view class="text">
								{{ item.address }}
							</view>
						</view>
					</view>
					<uni-icons
						size="24"
						color="#666"
						type="compose"
						@click="editItem(item)"
					></uni-icons>
				</view>
			</radio-group>
			<view class="add_btn">
				<button class="btn" @click="selecAddress">确定</button>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="popupvideoRef" background-color="#fff" @change="urlClickShow">
		<video
			:src="videoUrl"
			:enable-progress-gesture="false"
			:show-center-play-btn="false"
		></video>
	</uni-popup>
	<!--选择上门时间 弹窗  str -->
	<TimePopup
		@set-popup="showpopup = $event"
		@value-change="valueChange"
		:showpopup="showpopup"
	></TimePopup>
</template>

<script setup lang="ts">
	import {ref, onMounted, watch, computed} from 'vue';
	import {onLoad, onUnload, onShow} from '@dcloudio/uni-app';
	import store from '@/store/index.js';
	import apiOrder from '@/util/api/order';
	import apiUpload from '@/util/api/upload.js';
	import TimePopup from '@/components/u-user/TimePopup.vue';
	import _ from 'lodash';
	import AreaAddress from '@/components/u-user/AreaAddress.vue';
	import roleStore from '@/store/role-play.js';
	
	/**
	 * 是否显示购买平台订单号字段
	 */
	const isShowBuyPlatformOrderNo = computed(() => {
		if (!store.state.wayType) {
			return false
		}
		
		if (!('isHousehold' in store.state.wayType)) {
			return false
		}
		
		if (store.state.wayType.isHousehold !== 1) {
			return false
		}
		
		return true
	})

	const fileList = ref([]); //上传的图片
	const showAddpopup = ref(null); //选择服务地址弹窗
	const showpopup = ref(false); //选择上门时间 弹窗
	const chackUseritem = ref(); //选择的用户地址Id
	const goodsCode = ref(''); //商品编码
	const isHistory = ref(false); //历史建单
	const orderData = ref({
		buyPlatformOrderNo: '', // 购买平台订单号
		content: '', //故障描述
		expectedDate: '', //期望上门日期 xxxx-xx-xx
		expectedEndTime: '', //期望开始上门时间
		expectedStartTime: '', //期望开始上门时间
		historyOrder: false, //是否历史工单报单：false-否，true-是
		images: [],
		moduleId: store.state.wayType.id, //工单模块ID
		source: 10,
		orderGoodsTypes: [],
		orderUser: {
			address: '', //客户详细地址
			area: '', //地址-县/区
			city: '', //地址-市
			helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
			name: '', //客户姓名
			otherPhone: '', //其他电话
			phone: '', //客户手机号
			province: '', //地址-省
			town: '', //地址-镇
			userId: null, //客户ID
			overinsured: false, //质保状态：false-保内，true-保外；historyOrder为true时，此字段才生效
			sendForRepairPhone: '', // 送修人联系手机号
			sendForRepairUserId: '', // 送修人ID
			sendForRepairUsername: '', // 送修人名称
		},
		workFieldVal: [],
	});
	onUnload(() => {
		uni.hideLoading();
	});
	const message = ref(''); //故障描述
	const imageStyles = ref({
		height: 72, // 边框高度
		width: 72, // 边框宽度
		border: {
			// 如果为 Boolean 值，可以控制边框显示与否
			color: '#eee', // 边框颜色
			width: '1px', // 边框宽度
			style: 'solid', // 边框样式
			radius: '0px',
		},
	});
	// 查看视频
	const popupvideoRef = ref();
	const videoUrl = ref('');
	const videoUrlShow = (url) => {
		videoUrl.value = url;
		popupvideoRef.value.open();
	};
	const urlClickShow = (v) => {
		if (!v.show) videoUrl.value = '';
	};
	// 预览图片
	const lookImg = (url) => {
		uni.previewImage({
			urls: [url],
		});
	};
	const navbarStatusHeight = ref(0);
	const navBarHeight = ref(0);
	const navBarWidth = ref(375);
	const back = () => {
		var pages = getCurrentPages();
		if (pages.length - 1 > 0) {
			uni.navigateBack({
				delta: 1,
			});
		} else {
			uni.reLaunch({
				url: '/pages_user/home/home',
			});
		}
	};
	const endTime = ref();
	onMounted(() => {
		let now = new Date();
		endTime.value = now.toLocaleString();
		const info = uni.getSystemInfoSync();
		navbarStatusHeight.value = info.statusBarHeight;
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect();
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value =
			menuInfo.bottom -
			info.statusBarHeight +
			(menuInfo.top - info.statusBarHeight);
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left;
		// #endif
	});
	onLoad(async (e) => {
		// #ifdef MP-WEIXIN
		orderData.value.source = 6;
		// #endif
		// #ifndef MP-WEIXIN
		orderData.value.source = 10;
		// #endif
		uni.showLoading({
			title: '加载中...',
		});
		if (e?.custCode) {
			uni.setStorageSync('custCode', e?.custCode);
		}
		await store.dispatch('getMobileUserHasLogin');
		if (e?.type) {
			store.commit('setWayType', {
				id: e.moduleCode,
				name:
					e.type == 1
						? '安装'
						: e.type == 2
						? '维修'
						: e.type == 3
						? '保养'
						: '其他',
				type: e.type, //1安装
			});
		}
		//商品扫码报单
		if (e?.code) {
			// 初始化数据
			goodsCode.value = e.code;
			// 工单报单-扫码报单，获取编码信息
			await getgoodsDetail();
		}
		// 历史报单
		if (e?.id) {
			goodsCode.value = e.id;
			isHistory.value = true;
			await getHistoryList();
		} else {
			isHistory.value = false;
		}
		// *******重新渲染****
		if (store.state.appointmentTime) {
			orderData.value.expectedDate = store.state.appointmentTime?.dateVal.date;
			orderData.value.expectedStartTime =
				store.state.appointmentTime.time.split('~')[0];
			orderData.value.expectedEndTime =
				store.state.appointmentTime.time.split('~')[1];
		}
		token.value = uni.getStorageSync('access-user').token;
		orderData.value.orderUser.address = store.state.userOrder.address; //联系详细地址
		orderData.value.orderUser.area = store.state.userOrder.area; //地址-县/区
		orderData.value.orderUser.city = store.state.userOrder.city; //地址-市
		orderData.value.orderUser.name = store.state.userOrder.name; //联系姓名
		orderData.value.orderUser.phone = store.state.userOrder.phone; //联系手机号
		orderData.value.orderUser.province = store.state.userOrder.province; //地址-省
		orderData.value.orderUser.town = store.state.userOrder.town; //地址-镇
		orderData.value.orderUser.userId = store.state.userOrder.userId; //联系ID
		addressValue.value = {
			province: store.state.userOrder.province, //省
			city: store.state.userOrder.city, //市
			area: store.state.userOrder.area, //区
			town: store.state.userOrder.town, //镇
		};
		// ******end*******

		orderData.value.moduleId = store.state.wayType.id;
		repeatSearch.value.historyOrderModuleId = store.state.wayType.id;
		if (store.state.wayType.id) {
			await getModuleField(store.state.wayType.id);
		}
		if (repeatOrderObj.value.enableOrderModule) {
			repeatSearch.value.moduleId = store.state.wayType.id;
		}
		uni.hideLoading();
	});
	// 获取重单设置
	const repeatOrderObj = ref({
		enableGoodsModel: true, //型号
		enableGoodsName: false, //商品名称
		enableOrderModule: false, //工单模块
		enableSNCode: false, //SN码、一物一码
		enableUserName: true, //客户名称
		enableUserPhone: true, //客户手机号
	});
	const getRepeatOrderSetFun = async () => {
		await apiOrder.getRepeatOrderSet().then((res) => {
			uni.hideLoading();
			if (res.code == 20000) {
				repeatOrderObj.value = res.data.row;
			}
		});
	};
	/**
	 * 重单字段查询
	 */
	const repeatSearch = ref({
		codeIds: [], //商品SN码
		goodsIds: [], //商品IDs
		moduleId: '', //模块ID
		userPhone: '', //客户手机号
		username: '', //客户姓名
		historyOrderModuleId: '', //历史工单查重 工单类型/模块ID
		historyOrderCodeIds: [], //历史工单查重 工单报单SN码
	});
	const getRepeatOrderFun = (dataVo, val = '') => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		return apiOrder.getRepeatOrder(dataVo).then((res) => {
			uni.hideLoading();
			if (res.code == 20000) {
				// 判断是否重复报单
				if (res.data.row.repeatOrder) {
					// 判断是否开启重复报单
					if (res.data.row.enableRepeatOrder) {
						if (res.data.row.enableRepeatOrderTip) {
							uni.showModal({
								title: '提示',
								content: val + '存在重复工单，继续报单或取消报单!',
								success: function (res) {
									if (res.confirm) {
										onSaveOrder();
										return false;
									} else if (res.cancel) {
										return true;
									}
								},
							});
							return true;
						}
					} else {
						// 不开启重复报单
						uni.showModal({
							title: '提示',
							content: val + '存在重复工单，不允许报单!',
							confirmText: '确定',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									return true;
								}
							},
						});
						return true;
					}
				}
				onSaveOrder();
			}
		});
	};
	onMounted(() => {
		// 设置申请类型标题
		if (store.state.wayType.id) {
			uni.setNavigationBarTitle({
				title: store.state.wayType.name,
			});
		}
	});
	const token = ref(''); //获取token值
	const addressRef = ref(); //地址组件元素
	const addressValue = ref({
		province: '', //省
		city: '', //市
		area: '', //区
		town: '', //镇
	});
	const color_text = ref('');
	// 联系信息变化
	const changeInput = () => {
		if (addressRef.value.address.province) {
			color_text.value = '';
		}
		orderData.value.orderUser = {
			...orderData.value.orderUser,
			...addressRef.value.address,
		};
		store.commit('setUserOrder', orderData.value.orderUser);
	};
	// 获取自定义字段
	const getModuleField = async (id) => {
		await apiOrder.getModuleField(id).then((res) => {
			if (res.code == 20000) {
				if (res.data.rows.length > 0) {
					orderData.value.workFieldVal = res.data.rows.map((o) => {
						o.fieldId = o.id;
						o.id = null;
						o.contents = o.contents.map((i) => {
							return {
								text: i.val,
								value: i.val,
							};
						});
						if (o.type == 5 || o.type == 6 || o.type == 7) {
							o.imgarr = [];
						} else if (o.type == 4) {
							o.value = [];
						} else {
							o.value = '';
						}
						return o;
					});
				}
			}
		});
	};

	/**
	 * 商品扫码报单，获取编码详情
	 */
	const getgoodsDetail = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		const res = await apiOrder.getUserOrderCodeInfo({code: goodsCode.value});
		if (res.code === 20000) {
			store.commit('setorderGoodsTypes', []);
			addMyGoods(res.data.row);
		}
		uni.hideLoading();
	};

	// 历史报单
	const getHistoryList = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		await apiOrder.userHistoryOrderApplySale(goodsCode.value).then((res) => {
			if (res.code == 20000) {
				orderData.value.historyOrder = true;
				orderData.value.orderUser.overinsured = res.data.row.overinsured;
				orderData.value.orderUser.userId = res.data.row.createOrderUserId;
				orderData.value.orderUser.address = res.data.row.address;
				orderData.value.orderUser.area = res.data.row.area;
				orderData.value.orderUser.city = res.data.row.city;
				orderData.value.orderUser.province = res.data.row.province;
				orderData.value.orderUser.town = res.data.row.town;
				orderData.value.orderUser.name = res.data.row.userName;
				orderData.value.orderUser.phone = res.data.row.userPhone;
				store.commit('setUserOrder', orderData.value.orderUser);
				store.commit('setorderGoodsTypes', []);
				res.data.row.goodsVos.map((o) => {
					addMyGoods(o);
				});
			}
		});
		uni.hideLoading();
	};
	//  客户已登记商品
	const addMyGoods = (item) => {
		if (item?.userId) {
			orderData.value.orderUser.userId = item.userId;
			orderData.value.orderUser.address = item.address;
			orderData.value.orderUser.area = item.area;
			orderData.value.orderUser.city = item.city;
			orderData.value.orderUser.province = item.province;
			orderData.value.orderUser.town = item.town;
			orderData.value.orderUser.name = item.userName;
			orderData.value.orderUser.phone = item.userPhone;
			store.commit('setUserOrder', orderData.value.orderUser);
		}
		if (!(store.state.userMobileHasLogin || token)) {
			addressValue.value = {
				province: store.state.userOrder.province, //省
				city: store.state.userOrder.city, //市
				area: store.state.userOrder.area, //区
				town: store.state.userOrder.town, //镇
			};
		}
		let tmp = {
			buyTime: item?.buyTime || '',
			buyMarket: item?.buyMarket || '',
			codeIds: isHistory.value
				? item.goodsCodes.map((o) => o.codeId)
				: [item.id],
			endTime: item.endTime || '',
			goodsId: item.goodsId,
			goodsSpecId: item.goodsSpecId,
			id: null,
			qty: 1,
			name: item.goodsName,
			specName: item.goodsSpecName,
			code: item.code,
			brandId: item.goodsBrandId,
			brand: item.goodsBrand,
			type: item.goodsType,
			model: item.goodsModel,
			image: item.goodsImage,
			typeGoods: 1, //1-客户已登记商品，2-未登记商品，3-商品信息
		};
		let orderGoodsTypes = [];
		orderGoodsTypes.push({type: 1, orderGoodsVos: [tmp]});
		store.commit('setorderGoodsTypesItem', orderGoodsTypes);
	};
	// 改变数量
	const changeValue = (item) => {
		let arr = store.state.orderGoodsTypes.map((o) => {
			if (o.type == item.typeGoods) {
				o.orderGoodsVos = o.orderGoodsVos.map((k) => {
					if (k.goodsSpecId == item.goodsSpecId) {
						k.qty = item.qty;
					}
					return k;
				});
			}
			return o;
		});
		store.commit('setorderGoodsTypes', arr);
	};
	// 删除商品
	const deleteGoods = (item) => {
		store.commit('deleteGoods', item);
	};
	// 删除明细列表的商品
	const deleteGoodsDetail = (item) => {
		if (store.getters.getTotalList.length == 1) {
			uni.showToast({
				icon: 'none',
				title: '至少有一个商品',
			});
			return;
		}
		uni.showModal({
			title: '提示',
			content: '确定要删除该商品？',
			confirmText: '取消',
			cancelText: '删除',
			success: async (res) => {
				if (res.confirm) {
				} else if (res.cancel) {
					deleteGoods(item);
				}
			},
		});
	};
	// 添加地址
	const onaddAddress = () => {
		uni.navigateTo({
			url: '/pages_user/user/edaddress',
		});
	};
	// 编辑地址
	const editItem = (item) => {
		uni.navigateTo({
			url: '/pages_user/user/edaddress?item=' + JSON.stringify(item),
		});
	};
	// 时间选择弹窗
	const chackTime = () => {
		showpopup.value = true;
	};
	// 返回预约时间选中的值
	const valueChange = (e) => {
		orderData.value.expectedDate = e?.dateVal.date;
		orderData.value.expectedStartTime = e.time.split('~')[0];
		orderData.value.expectedEndTime = e.time.split('~')[1];
		store.commit('setappointmentTime', e);
	};
	// 获取故障选择的字段
	const faultTypeList = () => {
		let list = [];
		for (let i of store.state.checkedFaultList) {
			i.list.map((o) => {
				list.push({id: i.typeId, name: o});
			});
		}
		return list;
	};
	// 选择的地址
	const itemUser = (item) => {
		if (item.province) {
			chackUseritem.value = item;
			orderData.value.orderUser.address = item.address;
			orderData.value.orderUser.province = item.province;
			orderData.value.orderUser.city = item.city;
			orderData.value.orderUser.area = item.area;
			orderData.value.orderUser.town = item.town;
			orderData.value.orderUser.sendForRepairUsername = item.username;
			orderData.value.orderUser.sendForRepairPhone = item.phone;
			orderData.value.orderUser.sendForRepairUserId = item.id;
		} else {
			uni.showToast({
				icon: 'none',
				title: '请补充地址信息',
			});
		}
	};
	watch(
		() => store.state.is_new_addressItemId,
		(n) => {
			if (n) {
				store.state.addressList.filter((o) => {
					if (o.id == store.state.is_new_addressItemId) {
						itemUser(o);
						selecAddress();
						store.commit('set_is_new_addressItemId', '');
					}
				});
			}
		},
	);
	// 确定选中的地址
	const selecAddress = () => {
		store.commit('setUserOrder', orderData.value.orderUser);
		showAddpopup.value.close();
	};
	// 添加商品
	const addGoods = () => {
		var pages = getCurrentPages();
		var pageIndex = pages
			.slice()
			.reverse()
			.findIndex((o) => o.route == 'pages_user/home/way/ordergoods');
		if (pageIndex == -1) {
			uni.navigateTo({
				url: '/pages_user/home/way/ordergoods',
			});
		} else {
			uni.navigateBack({delta: pageIndex});
		}
	};
	// 地址弹窗
	const popupshow2 = async () => {
		searchNamePhone.value = '';
		await store.dispatch('seleAddress', {page: 0, name: ''});
		// if (store.state.addressList.length > 0) {
		// 	chackUseritem.value = store.state.addressList.filter(o => o.mainContact)[0]
		// }
		showAddpopup.value.open();
	};
	const searchNamePhone = ref(''); //增加查询字段：联系人名称/联系手机号
	// 地址搜索
	const getNetwrokSelectFn = _.debounce(
		() => {
			store.dispatch('seleAddress', {page: 0, name: searchNamePhone.value});
		},
		600,
		{leading: false},
	);
	// 选择图片后触发
	const onsuccessImg = (res) => {
		res.tempFiles.filter((o) => {
			if (o.size > 512 * 1024 && o.extname == 'gif') {
				uni.showToast({
					icon: 'none',
					title: 'GIF 图片超过限制大小',
				});
			} else {
				fileList.value.push(o);
			}
		});
	};

	// 图片从列表移除时触发
	const ondeleteImg = (res) => {
		fileList.value = fileList.value.filter((o) => {
			return o.uuid != res.tempFile.uuid;
		});
	};
	// 删除故障标签
	const setFaultType = (val) => {
		let list = [];
		list = store.state.checkedFaultList.filter((o) => {
			if (o.typeId == val.id) {
				o.list = o.list.filter((i) => {
					if (i == val.name) {
						return !i;
					}
					return i;
				});
				if (o.list.length == 0) {
					return !o;
				}
			}
			return o;
		});
		store.commit('setchackFaultList', list);
	};
	// 选择故障库
	const goFault = () => {
		uni.navigateTo({
			url: `/pages_user/home/fault/faulttype?value=` + goodsCode.value,
		});
	};
	// 选择图片后触发
	const onsuccessImg2 = (item, files) => {
		files.tempFiles.filter((o) => {
			if (o.size > item.uploadSize * 1024 * 1024) {
				uni.showToast({
					icon: 'none',
					title: `图片超过限制大小${item.uploadSize}MB`,
				});
			} else {
				item.imgarr.push(o);
			}
		});
	};
	// 图片从列表移除时触发
	const ondeleteImg2 = (item, file) => {
		item.imgarr = item.imgarr.filter((o) => {
			return o.uuid != file.tempFile.uuid;
		});
	};
	// 上传视频
	const chooseVideoImage = (item, file) => {
		if (file.tempFiles[0].size > item.uploadSize * 1024 * 1024) {
			uni.showToast({
				icon: 'none',
				title: `视频超过限制大小${item.uploadSize}MB`,
			});
		} else {
			item.imgarr.push(file.tempFiles[0]);
		}
	};
	// 附件上传
	function chooseFile(item, files) {
		files.tempFiles.filter((o) => {
			if (o.size > item.uploadSize * 1024 * 1024) {
				uni.showToast({
					icon: 'none',
					title: `pdf超过限制大小${item.uploadSize}MB`,
				});
			} else {
				item.imgarr.push(o);
			}
		});
	}
	// 查看附件
	const lookPDF = (url) => {
		uni.openDocument({
			filePath: url,
			fileType: 'pdf',
			success: function (res) {},
			fail: function (err) {
				uni.showToast({
					icon: 'none',
					title: err,
				});
			},
		});
	};
	// 删除视频
	const delete_video = (item, index) => {
		item.imgarr.splice(index, 1);
	};
	// 提交服务工单
	const baseForm = ref();
	const onsubService = _.debounce(
		async () => {
			if (!store.state.userOrder.province) {
				color_text.value = '#f29e99';
			}
			await baseForm.value
				.validate()
				.then(async (res) => {
					orderData.value.orderUser.address = store.state.userOrder.address; //客户详细地址
					orderData.value.orderUser.area = store.state.userOrder.area; //地址-县/区
					orderData.value.orderUser.city = store.state.userOrder.city; //地址-市
					orderData.value.orderUser.name = store.state.userOrder.name; //客户姓名
					orderData.value.orderUser.phone = store.state.userOrder.phone; //客户手机号
					orderData.value.orderUser.province = store.state.userOrder.province; //地址-省
					orderData.value.orderUser.town = store.state.userOrder.town; //地址-镇
					orderData.value.orderUser.userId = store.state.userOrder.userId; //客户ID
					
					if (isShowBuyPlatformOrderNo.value && !orderData.value.buyPlatformOrderNo) {
						uni.showToast({
							icon: 'none',
							title: '请输入购买平台订单号',
						});
						return false;
					}

					if (store.getters.getTotalList.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '请选择商品',
						});
						return;
					}
					if (fileList.value.length == 0) {
						uni.showToast({
							title: '请上传图片！',
							icon: 'none',
						});
						return;
					}
					// 处理故障库类型 故障描述
					let arr = faultTypeList();
					arr = arr.map((o) => o.name);
					arr.push(message.value);
					let str = arr.join('、');
					orderData.value.content = str;

					// 处理选择的类型商品
					let type1 = [];
					let type3 = [];
					orderData.value.orderGoodsTypes = [];
					store.getters.getTotalList.map((o) => {
						if (o.typeGoods == 1) {
							type1.push(o);
						} else if (o.typeGoods == 3) {
							type3.push(o);
						}
					});
					if (type1.length > 0) {
						orderData.value.orderGoodsTypes.push({
							orderGoodsVos: type1,
							type: 1,
						});
					}
					if (type3.length > 0) {
						orderData.value.orderGoodsTypes.push({
							orderGoodsVos: type3,
							type: 3,
						});
					}
					
					/**
					 * 设置工单商品类型
					 * 商用为1
					 * 家用为2
					 * 其他的为0
					 */
					if (store.state.wayType && 'isHousehold' in store.state.wayType && store.state.wayType.isHousehold === 0) {
						orderData.value.workGoodsType = 1
					} else if (store.state.wayType && 'isHousehold' in store.state.wayType && store.state.wayType.isHousehold === 1) {
						orderData.value.workGoodsType = 2
					} else {
						orderData.value.workGoodsType = 0
					}
					await onSave();
				})
				.catch((err) => {
					console.log(err);
					// let str = err.map((o) => o.errorMessage);
					// uni.showToast({
					// 	title: str[0],
					// 	icon: 'none',
					// 	duration: 2000,
					// });
				});
		},
		2000,
		{leading: false},
	);
	// 保存提交工单
	const onSave = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		await getRepeatOrderSetFun();
		if (
			repeatOrderObj.value.enableUserPhone &&
			repeatOrderObj.value.enableUserName
		) {
			repeatSearch.value.userPhone = orderData.value.orderUser.phone;
			repeatSearch.value.username = orderData.value.orderUser.name;
		} else if (repeatOrderObj.value.enableUserName) {
			repeatSearch.value.username = orderData.value.orderUser.name;
			repeatSearch.value.userPhone = '';
		} else if (repeatOrderObj.value.enableUserPhone) {
			repeatSearch.value.userPhone = orderData.value.orderUser.phone;
			repeatSearch.value.username = '';
		}
		let codeIds = [];
		let goodsIds = [];
		const orderGoods = orderData.value.orderGoodsTypes;
		orderGoods.map((o) => {
			o.orderGoodsVos.map((i) => {
				if (i.codeIds.length > 0) {
					codeIds.push(...i.codeIds);
				}
				if (i.goodsId) {
					goodsIds.push(i.goodsId);
				}
			});
		});
		repeatSearch.value.historyOrderCodeIds = codeIds;
		if (
			repeatOrderObj.value.enableGoodsModel ||
			repeatOrderObj.value.enableGoodsName
		) {
			repeatSearch.value.goodsIds = goodsIds;
		} else {
			repeatSearch.value.goodsIds = [];
		}
		if (repeatOrderObj.value.enableSNCode) {
			repeatSearch.value.codeIds = codeIds;
		} else {
			repeatSearch.value.codeIds = [];
		}
		await getRepeatOrderFun(repeatSearch.value);
	};
	const onSaveOrder = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		// 上传图片获取图片
		let dataValue = _.cloneDeep(orderData.value);
		if (fileList.value.length > 0) {
			dataValue.images = [];
			for (let i = 0; i < fileList.value.length; i++) {
				let tmp = fileList.value[i];
				await apiUpload.uploadOrderFile({files: tmp.file}).then((res) => {
					dataValue.images.push({id: null, image: res.data.rows[0]});
				});
			}
		}
		// 上传图片获取图片
		// 处理上传图片
		if (fileList.value.length > 0) {
			dataValue.images = [];
			for (let i = 0; i < fileList.value.length; i++) {
				let tmp = fileList.value[i];
				await apiUpload.uploadOrderFile({files: tmp.file}).then((res) => {
					dataValue.images.push({id: null, image: res.data.rows[0]});
				});
			}
		}
		if (dataValue.workFieldVal.length > 0) {
			for (let key in dataValue.workFieldVal) {
				let item = dataValue.workFieldVal[key];
				item['optValue'] = [];
				if (item.type === 4) {
					for (let i = 0; i < item.value.length; i++) {
						let tmp = item.value[i];
						item.optValue.push({id: '', optValue: tmp});
					}
				} else if (item.type === 5 || item.type === 6) {
					for (let i = 0; i < item.imgarr.length; i++) {
						let tmp = item.imgarr[i];
						await apiUpload.uploadOrderFile({files: tmp.file}).then((res) => {
							item.optValue.push({id: '', optValue: res.data.rows[0]});
						});
					}
				} else if (item.type === 7) {
					for (let i = 0; i < item.imgarr.length; i++) {
						let tmp = item.imgarr[i];
						await apiUpload.orderVideoUpload({files: tmp.file}).then((res) => {
							item.optValue.push({id: '', optValue: res.data.rows[0]});
						});
					}
				} else if (item.type == 8) {
					item.optValue = [
						{id: '', optValue: Math.floor(Number(item.value) * 2)},
					];
				} else {
					item.optValue = [{id: '', optValue: item.value}];
				}
			}

			dataValue.workFieldVal = dataValue.workFieldVal.map((o) => {
				return {
					workFieldId: o.workFieldId,
					moduleFieldId: o.moduleFieldId,
					id: '',
					name: o.name,
					optionVos: o.optValue,
					type: o.type,
				};
			});
		}

		await apiOrder.saveUserOrder(dataValue).then((res) => {
			if (res.code == 20000) {
				repeatSearch.value = {
					codeIds: [], //商品SN码
					goodsIds: [], //商品IDs
					moduleId: '', //模块ID
					userPhone: '', //客户手机号
					username: '', //客户姓名
					historyOrderModuleId: '', //历史工单查重 工单类型/模块ID
					historyOrderCodeIds: [], //历史工单查重 工单报单SN码
				};
				// 初始化数据
				store.commit('setorderGoodsTypes', []);
				store.commit('setchackFaultList', []);
				store.commit('setchackFaultItem', {id: null});
				store.commit('setWayType', {});
				store.commit('setcheckBrandItem', {id: null});
				store.commit('setcheckClassifyItem', {id: null});
				store.commit('setappointmentTime', null);
				store.commit('setUserOrder', {
					address: '', //客户详细地址
					area: '', //地址-县/区
					city: '', //地址-市
					helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
					name: '', //客户姓名
					otherPhone: '', //其他电话
					phone: '', //客户手机号
					province: '', //地址-省
					town: '', //地址-镇
					userId: null,
				});
				uni.reLaunch({
					url:
						'/pages_user/home/success?workNo=' +
						res.data.workNo +
						'&id=' +
						res.data.id,
				});
			}
		});
		uni.hideLoading();
	};
</script>

<style lang="scss" scoped>
	.add {
		background-color: #fafafa;
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
			display: none;
		}

		.fixed {
			// position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			.navbar-content {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 80rpx;
				background-color: #007cff;

				.back_btn {
					margin-left: 24rpx;
					position: relative;
					z-index: 9;
					left: 0;
					flex: 1;
					display: flex;
					justify-content: flex-start;
				}

				.navBar {
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					position: absolute;
					top: 0;
					bottom: 0;
					width: 74%;
					height: 100%;
					color: #fff;

					.text_title {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 1rem !important;
					}
				}
			}
		}

		.custom-title {
			font-size: 28rpx;
		}

		:deep(.uni-modal__bd) {
			color: #f56c6c !important;
		}

		:deep(.uni-modal__btn_primary) {
			color: #999 !important;
		}

		:deep(.uni-modal__btn_default) {
			color: #f56c6c !important;
		}

		.star {
			color: #dd524d;
			font-size: 28rpx;
			font-weight: bold;
			// margin-left: 4rpx;
		}

		.address_btn {
			position: fixed;
			bottom: 0rpx;
			right: 0;
			left: 0;
			z-index: 6;
			background-color: #fff;
			border-top: 1rpx solid #eee;

			.btn_addres {
				padding: 30rpx 0 30rpx;

				:deep(button:after) {
					border: none !important;
				}

				.btn {
					border-radius: 50rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					background-color: #007cff;
					margin: 0 48rpx;
				}

				.btn_bg {
					border-radius: 50rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 32rpx;
					background-color: #ccc;
					margin: 0 200rpx;
				}
			}
		}

		.contact_xy {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			height: 100%;
			flex: 1;
			overflow: hidden;

			.scroll_box {
				height: 100%;
				overflow-y: scroll;

				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					-webkit-appearance: none;
					color: transparent;
					display: none;
				}

				.scroll_box_cont {
					padding-bottom: 300rpx;
					margin: 24rpx;
				}
			}

			:deep(.uni-forms-item) {
				margin-bottom: 24rpx;
				padding: 0rpx 24rpx;

				.is-input-border {
					border-radius: 0;
				}

				.uni-forms-item__error {
					left: auto;
					right: 0;
					padding-top: 2rpx;
				}
			}

			:deep(.address_item_) {
				// padding-top: 24rpx;
				.is-direction-top {
					flex-direction: row !important;
					align-items: center;
				}
			}

			.link {
				height: 24rpx;
				background-color: #fafafa;
			}

			:deep(.uni-forms-item__label) {
				font-size: 28rpx;
				height: 44rpx;
				padding-bottom: 4rpx;
				line-height: normal;
				color: #000;
			}

			:deep(.uni-easyinput__content-input) {
				font-size: 28rpx;
			}

			.uni_form {
				background-color: #fff;
				padding-bottom: 2rpx;
				padding-top: 20rpx;

				.user_info {
					padding-top: 20rpx;
				}

				:deep(.uni-forms-item) {
					.uni-select {
						// border: none;
						// border-bottom: solid 1px #eee;
						border-radius: 0;
						// padding: 0;
					}

					.team_type {
						height: 100%;
						display: flex;
						align-items: center;
						flex: 1;
					}

					.uni-select__input-placeholder {
						font-size: 28rpx;
					}

					.team_type_ {
						border-bottom: solid 1px #eee;
					}

					.addressListStr_type {
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-left: 20rpx;
						border-bottom: solid 1px #eee;
						max-height: 280rpx;
						overflow: auto;

						/* Firefox */
						&::-webkit-scrollbar {
							width: 0;
							height: 0;
							background-color: transparent;
						}

						.icon_btn {
							margin-right: 10rpx;
						}

						.tip {
							font-size: 28rpx;
							color: #999;
						}
					}

					.btn_input {
						display: flex;
						align-items: center;
						height: 35px;
						border-bottom: solid 1px #eee;
						width: 100%;

						.uniui-bottom::before {
							color: #999;
							font-size: 14px;
						}

						.icon {
							top: -20%;
						}
					}
				}

				:deep(.uni-easyinput__content-textarea) {
					height: 100%;
					line-height: normal;
					min-height: 120rpx;
					max-height: 160rpx;
					margin: 0;
					padding: 12rpx 20rpx;
					overflow: auto;
					font-size: 28rpx;
				}

				.pic_img {
					:deep(.icon-add) {
						width: 26rpx;
						height: 3rpx;
						background-color: #999;
					}

					:deep(.icon-del) {
						width: 24rpx;
					}

					:deep(.icon-del-box) {
						width: 40rpx;
						height: 40rpx;
						top: 0;
						right: 0;
						background-color: rgba(0, 0, 0, 0.3);
					}

					:deep(.file-picker__box-content) {
						border-radius: 0 !important;

						.file-picker__progress {
							display: none !important;
						}
					}
				}

				:deep(.file-picker__progress-item) {
					display: none;
				}

				.pic_video {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 20rpx;

					.list_video {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.box_video {
							width: 120rpx;
							height: 120rpx;
							// margin-right: 20rpx;
							// margin-bottom: 20rpx;
							position: relative;

							.clear_icon {
								position: absolute;
								top: 0;
								right: 0;
								z-index: 2;
								width: 40rpx;
								height: 40rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								&:after {
									content: '';
									background-color: rgba(0, 0, 0, 0.3);
									position: absolute;
									top: 0;
									right: 0;
									z-index: -1;
									width: 40rpx;
									height: 40rpx;
									border-radius: 50%;
								}
							}

							.item_video {
								width: 100%;
								height: 100%;
							}
						}

						.box_video_pdf {
							width: 120rpx;
							height: 120rpx;
							// margin-right: 20rpx;
							// margin-bottom: 20rpx;
							position: relative;

							.pdf_sty {
								background-color: rgb(250, 81, 81);
								width: 100%;
								height: 100%;
								color: #fff;
								text-align: center;
								font-size: 22rpx;
								position: relative;
								display: flex;
								align-items: center;
								justify-content: center;

								&:before {
									content: '';
									position: absolute;
									z-index: 2;
									border: 12rpx solid #0000002b;
									right: 0rpx;
									top: 0rpx;
									border-top: 12rpx solid #fff;
									border-right: 12rpx solid #fff;
								}
							}

							.clear_icon {
								position: absolute;
								top: 0;
								right: 0;
								z-index: 4;
								width: 40rpx;
								height: 40rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								&:after {
									content: '';
									background-color: rgba(0, 0, 0, 0.3);
									position: absolute;
									top: 0;
									right: 0;
									z-index: -1;
									width: 40rpx;
									height: 40rpx;
									border-radius: 50%;
								}
							}
						}
					}

					.btn_uploader {
						border: 1px solid #eeeeee;
						width: 120rpx;
						height: 120rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 0;
						// margin-right: 20rpx;
						// margin-bottom: 20rpx;
						position: relative;
						overflow: hidden;

						.icon_plus {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					:deep(.uni-file-picker__files) {
						position: absolute;
						top: 0;
						right: 0;
						z-index: 4;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}

				:deep(.is-input-border) {
					// border: none;
					// border-bottom: 1rpx solid transparent;
					border-radius: 0;

					// &.is-focused {
					// 	border-bottom: 1rpx solid #007cff99;

					// 	.uniui-clear,
					// 	.uniui-eye-filled {

					// 		color: #007cff99 !important;
					// 	}
					// }
				}
			}

			:deep(.uni_list) {
				border-radius: 10rpx;

				.other_order {
					display: flex;
					align-items: center;
				}
			}

			:deep(.uni-date-x--border) {
				border-radius: 0;

				.uni-date-x {
					border-radius: 0;
				}
			}

			.mg_top {
				background-color: #fff;
				padding: 24rpx 0 2rpx;

				.sel_ku {
					font-size: 28rpx;
					color: #999;
					line-height: 42rpx;
				}

				.message {
					// margin: 0 30rpx;
					border: solid 1px #eee;
					flex: 1;

					:deep(textarea) {
						font-size: 28rpx;
						// width: 600rpx;
						flex: 1;
						min-height: 100rpx;
						padding: 0 14rpx;
						max-height: 200rpx;
						overflow: auto;
					}

					.big_input {
						display: flex;
						font-size: 28rpx;
						flex-wrap: wrap;
						color: #007cff;
						margin: 10rpx 0rpx 0rpx;

						.input_item {
							background-color: #fff;
							border-radius: 10rpx;
							padding: 4rpx 10rpx;
							margin-bottom: 10rpx;
							transform: scale(0.9);

							.icon_close {
								margin-left: 6rpx;
							}
						}
					}
				}

				:deep(.tiao_jian) {
					display: flex;
					column-gap: 4rpx;
					padding-bottom: 10rpx;

					.text {
						font-size: 24rpx;
						color: #999;
						flex: 1;
						line-height: 19px;
					}
				}

				.pic_img {
					:deep(.icon-add) {
						width: 26rpx;
						height: 3rpx;
						background-color: #999;
					}

					:deep(.icon-del) {
						width: 24rpx;
					}

					:deep(.icon-del-box) {
						width: 40rpx;
						height: 40rpx;
						top: 0;
						right: 0;
						background-color: rgba(0, 0, 0, 0.3);
					}

					:deep(.file-picker__box-content) {
						border-radius: 0 !important;

						.file-picker__progress {
							display: none !important;
						}
					}
				}
			}

			.por_card {
				// max-height: 60vh;
				// overflow: scroll;
				background-color: #fafafa;
				display: flex;
				flex-direction: column;
				row-gap: 24rpx;
				padding-bottom: 24rpx;

				/* Firefox */
				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				}

				.goods_item {
					display: flex;
					flex-direction: column;
					background-color: #fff;
					border-radius: 4rpx;
					border: 1px solid #eee;
					padding: 24rpx 14rpx;
					padding-right: 0;
					box-sizing: border-box;
					position: relative;

					&:first-child {
						margin-top: 20rpx;
					}

					.goods_item_left {
						display: flex;
						// align-items: center;
						width: 100%;

						.item_img {
							// margin: 0 20rpx;
							width: 130rpx;
							height: 130rpx;
							background-color: #fff;
							border-radius: 4rpx;
							border: 2rpx solid #eee;

							._img {
								width: 130rpx;
								height: 130rpx;
								border-radius: 4rpx;
							}
						}

						.item_title {
							font-size: 24rpx;
							margin-left: 16rpx;
							flex: 1;
							margin-right: 14rpx;

							.item_title_header {
								display: flex;
								justify-content: space-between;
								align-items: center;
								position: relative;
								column-gap: 12rpx;

								.delete_item {
									width: 60rpx;
									height: 40rpx;

									.del_btn {
										position: absolute;
										top: -4rpx;
										right: 0;
									}
								}
							}

							.item_title_name {
								margin: 10rpx 0 10rpx;
								font-weight: bold;
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.item_title_text_brand {
								font-size: 28rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;

								.dot {
									font-weight: bold;
									padding: 0 10rpx;
								}
							}

							.item_title_text {
								font-size: 24rpx;
								color: #777;
								margin-top: 10rpx;
								display: flex;
								flex-wrap: wrap;

								.item_title_color {
									color: #000;
									flex: 1;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}
							}

							.item_title_code {
								font-size: 24rpx;
								color: #777;
								display: flex;
								justify-content: space-between;
								align-items: center;
								position: relative;
								margin-top: 8rpx;

								.item_title_color {
									color: #000;
								}
							}

							.number {
								display: flex;
								justify-content: flex-end;
								width: 100%;
								flex: 1;
								text-align: right;
							}
						}
					}
				}
			}

			.address_item {
				display: flex;
				// align-items: center;
				justify-content: flex-end;
				flex: 1;
			}

			.add_pro {
				color: #007cff;
				display: flex;
				align-items: center;

				.custom-title {
					font-size: 28rpx;
				}
			}
		}
	}

	.popup_main {
		background-color: #fafafa;
		height: 1200rpx;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;

		.search_card {
			display: flex;
			align-items: center;
			margin: 0 24rpx;

			&_bar {
				flex: 1;
			}

			.search_btn {
				font-size: 28rpx;
				color: #007cff;
				font-weight: bold;
			}
		}

		.add_address {
			display: flex;
			justify-content: flex-end;
			color: #007cff;
			cursor: pointer;
			padding: 0 24rpx 24rpx;
			font-size: 28rpx;
		}

		.lable_top {
			text-align: center;
			line-height: 100rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			height: 100rpx;

			.icon {
				position: absolute;
				right: 40rpx;
			}
		}

		.sele_ul {
			overflow: auto;
			// height: 100%;
			flex: 1;
			width: 100%;
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;

			.sele_li {
				background-color: #fff;
				margin: 0 24rpx;
				border-radius: 4rpx;
				padding: 24rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:last-child {
					margin-bottom: 300rpx;
				}

				.sele_li_item {
					display: flex;
					align-items: center;
					flex: 1;

					.add_ed {
						display: flex;
						flex-direction: column;
						flex: 1;
						margin-left: 14rpx;
						row-gap: 6rpx;

						.user_xx {
							font-size: 28rpx;
							display: flex;
							align-items: center;
							// margin-bottom: 12rpx;

							.user_name {
								font-size: 28rpx;
							}

							.tip {
								border: 1rpx solid #00c0c0;
								margin-left: 30rpx;
								border-radius: 4rpx;
								padding: 2rpx 6rpx;
								color: #00c0c0;
								font-size: 22rpx;
							}
						}

						.text {
							font-size: 28rpx;
							color: #000;
							width: 100%;
							white-space: pre-wrap;
							// margin-top: 12rpx;
						}
					}
				}
			}
		}

		.add_btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 3;
			background-color: #fff;
			padding: 30rpx 0;
			border-top: 1px solid #eee;

			.btn {
				margin: 0 48rpx;
				background-color: #007cff;
				color: #fff;
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				border-radius: 40rpx;
			}
		}
	}

	.popup-time {
		background-color: #fff;
		height: 600rpx;
		border-radius: 40rpx 40rpx 0 0;
		width: 100%;
		position: relative;
		overflow-y: auto;

		.lable_top {
			text-align: center;
			line-height: 100rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			height: 100rpx;
			border-bottom: 1rpx solid #eee;

			.icon {
				position: absolute;
				right: 40rpx;
			}
		}

		.bodyer_time {
			display: flex;
			height: calc(100% - 102rpx);

			.bodyer-left {
				background-color: #eee;

				.left-item {
					padding: 20rpx;
				}

				.active_item {
					background-color: #fff;
					color: #007cff;
				}
			}

			.bodyer-rigth {
				.left-item {
					padding: 20rpx;
					text-align: center;
				}

				.is-show {
					color: #eee;
				}

				.active_item {
					color: #007cff;
				}
			}
		}
	}

	:deep(.uni-forms-item__content) {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.sel_address {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #000;
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.text_9 {
			color: #999;
			line-height: 42rpx;
		}

		.address_tip {
			// width: 80%;
			white-space: pre-wrap;
		}

		.tipadd {
			overflow: hidden;
			text-overflow: ellipsis;
			display: flex;
			flex-wrap: wrap;
			word-wrap: break-word;
			word-break: break-all;
			text-align: right;
			justify-content: flex-end;

			.user_name {
				text-align: right;
			}
		}
	}
</style>
